<template>
  <div class="student_container">
    <div class="voucher_warp">
      <div class="voucher_table">
        <div class="voucher_title">
          <span class="fl">
            <span>日期：2021-11-10</span><span>凭证字号：记-1</span><span>附件：1</span>
          </span>
          <span class="fr">
            <span>制单人：史文</span>
            <span>审核人：李莉</span>
          </span>
        </div>
        <el-table :data="tableData">
          <el-table-column prop="date" label="资产" width="180">
          </el-table-column>
          <el-table-column prop="name" label="行次" width="180">
          </el-table-column>
          <el-table-column prop="address" label="期末余额">
          </el-table-column>
          <el-table-column prop="date" label="年初余额" width="180">
          </el-table-column>
          <el-table-column prop="name" label="负债和所有者权益" width="180">
          </el-table-column>
          <el-table-column prop="date" label="行次" width="180">
          </el-table-column>
        </el-table>
      </div>
      <div class="voucher_menu">
        <div class="voucher_menu_title">凭证字号</div>
        <div class=""></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapGetters
  } from "vuex";
  import CloudSystem from '@/router/cloudSystem.js'
  export default {
    provide() {
      return {
        reload: this.reload,
      };
    },
    name: "projectDetails",
    data() {
      return {
        collapseLost: CloudSystem,
        tableData: []
      };
    },
    mounted() {},
    components: {
      // commonHeader,
      // asideNav,tags
    },
    computed: {
      ...mapGetters({
        dynamicTags: ["dynamicTags"],
        // userInfo: ["userInfo"],
        // personalDetails: ["personalDetails"],
      }),
    },
    created() {
      console.log('assets')
    },
    methods: {
      handleselect(key, keyPath) {
        // // console.log(key);
        // // console.log(keyPath);
        // // return
        // this.dynamicTag = JSON.parse(JSON.stringify(this.dynamicTags))
        // // console.log("child******", child)
        // let tags = this.dynamicTag.some((item) => {
        //   return item.path == key;
        // })
        // if (tags) {
        //   this.$router.push({
        //     path: key
        //   });
        // } else {
        //   // console.log("88888888")
        //   this.dynamicTag.push(child);
        //   this.$router.push({
        //     path: key
        //   });
        //   let arr = JSON.parse(JSON.stringify(this.dynamicTag));
        //   this.$store.commit(this.$types.DYNAMICTAGS, arr);
        // }
      },
      handleopen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleclose(key, keyPath) {
        console.log(key, keyPath);
      },
      clickItem(child) {
        this.actvieItem = child.path;
        this.actvieName = child.name;
        this.dynamicTag = JSON.parse(JSON.stringify(this.dynamicTags))
        // console.log("child******", child)
        let tags = this.dynamicTag.some((item) => {
          return item.path == child.path;
        })
        if (tags) {
          this.$router.push({
            path: child.path
          });
        } else {
          // console.log("88888888")
          this.dynamicTag.push(child);
          this.$router.push({
            path: child.path
          });
          let arr = JSON.parse(JSON.stringify(this.dynamicTag));
          this.$store.commit(this.$types.DYNAMICTAGS, arr);
        }
        // console.log(this.dynamicTags)
        // if (this.dynamicTags.length == 1) {
        //   this.actvieItem = this.dynamicTags[0].path;
        // }
      },
    },
    watch: {

    }
  };
</script>

<style lang="less" scoped="scoped">
  .voucher_warp {
    padding: 20px 15px;
    box-sizing: border-box;
    display: flex;
    height: 100%;

    .voucher_table {
      flex: 1;
      min-width: 0;
      border: 1px solid #DCE0E3;
      border-radius: 4px;

      .voucher_title {
        height: 64px;
        line-height: 64px;
        padding-left: 35px;
        box-sizing: border-box;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        overflow: hidden;
        span.fl{
          float: left;
          span{

            margin-right: 60px;
          }
        }
        span.fr{
          float: right;
          span{

            margin-right: 60px;
          }
        }
      }

      /deep/.el-table {
        &::before {
          display: none;
        }

        thead {
          th {
            background-color: #F6F7F9;
            color: #666666;
            font-weight: normal;
          }
        }
      }
    }

    .voucher_menu {
      width: 305px;
      height: 100%;
      border: 1px solid #DCE0E3;
      margin-left: 10px;
      .voucher_menu_title {
        height: 64px;
        line-height: 64px;
        padding-left: 17px;
        box-sizing: border-box;
        border-bottom: 1px solid #DCE0E3;
      }

      
    }
  }
</style>
